<!DOCTYPE html>
<html>
	<head>
		<style type="text/css">
		.cancel_btn
		{
		margin:10px 0px 5px 35px
		}
		.continue_btn
		{
		margin:10px 35px 5px 0px
		}
		.selection_btn
		{
		background-image: url("file:///android_res/drawable/dropdown_bg.png");
		}
		.text{
		font-family:Lucida Sans Unicode;
		}
		</style>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" href="../css/styles.css" />
		<!-- <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> -->
		<link rel="stylesheet" href="../css/jquery.mobile-1.3.1.min.css">
		<link rel="stylesheet" href="file:///android_asset/css/in.css">
		
		
		<!--<link type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" rel="stylesheet" /> -->
		<link type="text/css" href="../css/jqm-datebox.min.css" rel="stylesheet" /> 
		
		<!-- Extra Codiqa features -->
		<link rel="stylesheet" href="codiqa.ext.css">
		<!-- jQuery and jQuery Mobile -->
		<script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script>
		<script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
		<!-- Extra Codiqa features -->
		<script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script>
		<script src="file:///android_asset/js/login.js"></script>
		
		<script type="text/javascript" src="../js/jqm-datebox.core.min.js"></script>
		<script type="text/javascript" src="../js/jqm-datebox.mode.datebox.min.js"></script>
		<script type="text/javascript" src="../js/jquery.mobile.datebox.i18n.en_US.utf8.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	</head>
	<body >
		<div class="ui-header ui-bar-b" align="center" data-theme="b" data-role="header" role="banner">
			<p style="padding:10px;">
			<font size="3"> Add New Rope Route </font></p>
			<img style="float:right;height:35px; margin:-37px 6px 0px 0px;width:50px;border-radius:10px;" src="../images/signout.png" onclick="signout()">
		</div>
		<!-- Header -->
			<div data-role="content" >
				<form id="myForm" method="POST">
				<div id="disable1">      
					<div style="margin:5px 0px 0px 0px">
						  <input name="routeName" id="routeName" placeholder="Rope Route Name"  type="text" >
					</div>     
					<div style="margin:5px 0px 0px 0px">
						  <select id="select-location" name="select-location" onchange="changeLocation(this.value)">
						  <option value="" >Location </option>
						  </select>
					</div>
					<div style="margin:5px 0px 0px 0px">
						  <select id="select-area" name="select-area" onclick="alertLocation()">
						  <option value="">Area </option>
						  </select>
					</div>
					<div style="margin:5px 0px 0px 0px">
						  <select  id="select-grade" name="select-grade" onclick="alertLocation()">
						  <option value="">Grade </option>
						  </select>
					</div>
					<div style="margin:5px 0px 0px 0px">
						  <select id="select-type" name="select-type" onclick="alertLocation()">
						  <option value="">Type </option> 
						  </select>
					</div>
					<div style="margin:5px 0px 0px 0px">
						  <select  id="select-color" name="select-color" onclick="alertLocation()">
						  <option value="">Color </option>
						  </select>
					</div>
					<div style="margin:5px 0px 0px 0px">
						  <select  id="select-setter" name="select-setter" onclick="alertLocation()">
						  <option value="" data-placeholder="true">Setter </option>
						  </select>
					</div>
					<div id="datePicker1">
						<input name="datePicker" id="datePicker" style="text-align:center;" type="date" data-role="datebox" data-options='{"mode":"datebox", "useNewStyle":true}' />
					</div>
					<div style="margin:5px 0px 0px 0px">
						<a href="#" style="float:left;margin:2px 10px 0px 0px;"> <img src="../images/cancel.png" onclick="goBack()" width = "120" height="40"></a> 
						<a href="#" style="float:right;margin:2px 0px 0px 10px;"> <img src="../images/continue.png" onclick="createPage()" width = "120" height="40"></a>           
					</div> 
				</div>
			</form>
			<div><p style="font-size:75pt;">&nbsp;</p></div>
		</div>				 
</body>
	<div style="background-image: url(../images/topbar.png); bottom:0;text-align:center;margin:0px 0px 0px 0px;" id="sample" class="ui-footer-fixed " > 
				<div style="margin:8px 0px -7px 17px;">
					<img  style="margin:0px -1px 13px -17px;" class="folder" src="../images/folder.png"  height="40" width="40" onclick="folder()">
					<img  style="margin:0px -1px 13px 19px;" class="folder" src="../images/settings.png" height="40" width="40" onclick="settings()">
					<img  style="margin:0px -1px 13px 19px;" class="" src="../images/home.png" height="40" width="40" onclick="home()">
					<img  style="margin:0px -1px 13px 19px;" class="folder" src="../images/boulder.png" height="40" width="40" onclick="boulder()">
					<img  style="margin:0px -1px 13px 19px;" class="folder" src="../images/route.png" height="40" width="40" onclick="route()">
				</div>
	</div>
</html>

	<script type="text/javascript" charset="utf-8" src="file:///android_asset/js/cordova.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script>
	function signout(){
		window.location='index_login.html';
	}
	function folder(){
		<!-- window.location='http://forerunnerpro.com/?nr=0'; -->
		navigator.app.loadUrl('http://forerunnerpro.com/?nr=0', { openExternal:true });
	}
	function settings(){
		window.location='settings.html';
	}
	function home(){
		window.location='option.html';
	}
	function boulder(){
		window.location='boulder_option.html';
	}
	function route(){
		window.location='route_option.html';
	}
	var email=window.localStorage["username1"];	
	var token1=encodeURIComponent(window.localStorage["token"]);	
	document.addEventListener("deviceready", updateRopeRoute, false);
	function updateRopeRoute(){
		
			// create location options
			$.ajax({
				type: "GET",
				url: window.localStorage["url"]+'/getlocationsforuser?userName='+email+'&token='+token1,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function(data){
					if(data.status == "SUCCESS"){
					$.each(data.data, function(key,value){	
						$('#select-location').append($("<option></option>").attr("value",value.locationId).text(value.name));
							});				
					}else if(data.errorCode=="100"){
						navigator.notification.alert("Please Sign In");
						window.location='index_login.html';
						return false;
					}
				}
			});
			var today = new Date();
			var dd = today.getDate();
			var mm = today.getMonth()+1; //January is 0!
			var yyyy = today.getFullYear();
			var CurrentDate=""+mm+"/"+dd+"/"+yyyy+"";
			$("#datePicker").val(CurrentDate);
			$.ajax({
				type: "GET",
				url: window.localStorage["url"]+'/getuserbyusername?username='+email+'&token='+token1,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function(data){
					if(data.status == "SUCCESS"){
						var obj=data.data;
						window.localStorage["userid1"]=obj.userid;
					}else if(data.errorCode=="100"){
						navigator.notification.alert("Please Sign In");
						window.location='index_login.html';
						return false;
					}
				}
			});
			
		//get climb system id by location group id
		//navigator.notification.alert(window.localStorage["url"]+'/climbsystemsbygroup/'+window.localStorage["GroupId"]+'/?token='+token1);
			$.ajax({
			type: "GET",
			url: window.localStorage["url"]+'/climbsystemsbygroup/'+window.localStorage["GroupId"]+'/?token='+token1,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(data){
					if(data.status == "SUCCESS"){
						//navigator.notification.alert("data value : "+data.data);
						$.each(data.data, function(key,value){
							window.localStorage["climbSystemId"] = data.data.climbSystemId;
						 });				
					}
				}
			});				
	}
	function alertLocation(){
		var location=$('#select-location').val();
		if(location==""){
		navigator.notification.alert("Please Select The Location");
		}
	}
	function goBack(){
		window.location='route_option.html';
	}
	function createPage(){
		var rName=$('#routeName').val();
		var location=$('#select-location').val();
		var area=$('#select-area').val();
		var grade=$('#select-grade').val();
		var type=$('#select-type').val();
		var color=$('#select-color').val();
		var setter=$('#select-setter').val();
		var Pdate1=$("#datePicker").val();	
		
		rName = $.trim(rName);
		location = $.trim(location);
		area = $.trim(area);
		grade = $.trim(grade);
		type = $.trim(type);
		color = $.trim(color);
		setter = $.trim(setter);
			if(location==""){
			navigator.notification.alert(" Please Select location");
			return false;
			}
			if(area==""){
			navigator.notification.alert(" Please Select Area");
			return false;
			}
			if(grade==""){
			navigator.notification.alert(" Please Select Grade");
			return false;
			}
			if(type==""){
			navigator.notification.alert(" Please Select Type");
			return false;
			}
			if(color==""){
			navigator.notification.alert(" Please Select color");
			return false;
			}
			if(setter==""){
			navigator.notification.alert(" Please Select Setter");
			return false;
			}
			if(Pdate1==""){
			navigator.notification.alert(" Please Select Date");
			return false;
			}else{
					var today = new Date();
					var dd = today.getDate();
					var mm = today.getMonth()+1; //January is 0!
					var yyyy = today.getFullYear();
					var fromDate=""+yyyy+"-"+mm+"-"+dd+"";
					var Pdate2=$("#datePicker").val();
					var array1 = Pdate2.split('/');
					var Pdate=""+array1[2]+"-"+array1[0]+"-"+array1[1]+"";
					/*if(array1[1]>mm || array1[0]>dd || array1[2]>yyyy){*/
					
					if (Date.parse(fromDate) < Date.parse(Pdate)) {
						navigator.notification.alert("Please Select The Valid Date");
						return false;
					}
					if(rName==""){
						$.ajax({
						type: "POST",
						url: window.localStorage["url"]+'/routes?token='+token1,
						contentType: "application/json; charset=utf-8",
						data:JSON.stringify({"routeType":type,"areaId":area,"color":color,"climbStyle":"1","grade":grade,"userId":setter,"createDate":Pdate,"modifyDate":Pdate,"status":"1","locationId":location}),
						success: function(data){
									if(data.status == "SUCCESS"){
										navigator.notification.alert("The Route Database Has Been Updated");
										window.location='route_option.html';
									}else if(data.errorCode=="100"){
										navigator.notification.alert("Please Sign In");
										window.location='index_login.html';
										return false;
									}
								}
						});
					}
					else{
					//create new rope route		
						$.ajax({
						type: "POST",
						url: window.localStorage["url"]+'/routes?token='+token1,
						contentType: "application/json; charset=utf-8",
						data:JSON.stringify({"routeName":rName,"routeType":type,"areaId":area,"color":color,"climbStyle":"1","grade":grade,"userId":setter,"createDate":Pdate,"modifyDate":Pdate,"status":"1","locationId":location}),
						success: function(data){
									if(data.status == "SUCCESS"){
										navigator.notification.alert("The Route Database Has Been Updated");
										window.location='route_option.html';
									}else if(data.errorCode=="100"){
										navigator.notification.alert("Please Sign In");
										window.location='index_login.html';
										return false;
									}
								}
							});
						}
				}
	}
	function changeLocation(id){
		var locationsCheck=document.getElementById('select-location').value;
		if(locationsCheck==""){
		}else{
		$('#select-area option').remove();
		$('#select-area').parent().find('.ui-btn-text').text("Area");
		$('#select-grade option').remove();
		$('#select-grade').parent().find('.ui-btn-text').text("Grade");
		$('#select-color option').remove();
		$('#select-color').parent().find('.ui-btn-text').text("Color");	
		$('#select-type option').remove();
		$('#select-setter option').remove();		
		var locationId="locationId";
			searchValue7="'"+locationId+"':'"+id+"',";
		// create area options
		$.ajax({
			type: "GET",
			url: window.localStorage["url"]+'/locations/'+id+'/areas?token='+token1,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(data){ 
				if(data.status == "SUCCESS"){
					$('#select-area').append($("<option></option>").attr("value","").text("Area"));
					$.each(data.data, function(key,value){	
					$('#select-area').append($("<option></option>").attr("value",value.areaId).text(value.areaName));
					 });				
				}else if(data.errorCode=="100"){
					navigator.notification.alert("Please Sign In");
					window.location='index_login.html';
					return false;
				}
			}
		});
		// create type options
			$.ajax({
				type: "GET",
				url: window.localStorage["url"]+'/routetypesbyroute/rope?token='+token1,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function(data){
					if(data.status == "SUCCESS"){
						$('#select-type').append($("<option></option>").attr("value","").text("Type"));
						$.each(data.data, function(key,value){	
						$('#select-type').append($("<option></option>").attr("value",value.routeTypeId).text(value.routeTypeName));
						 });				
					}else if(data.errorCode=="100"){
						navigator.notification.alert("Please Sign In");
						window.location='index_login.html';
						return false;
					}
				}
			});
		// create colors options
			$.ajax({
				type: "GET",
				url: window.localStorage["url"]+'/colorsbylocationgrp/'+window.localStorage["GroupId"]+'/?token='+token1,
				contentType: "application/json; charset=utf-8",
				dataType: "json",
				success: function(data){
					if(data.status == "SUCCESS"){
						$('#select-color').append($("<option></option>").attr("value","").text("Color"));
						$.each(data.data, function(key,value){	
						$('#select-color').append($("<option></option>").attr("value",value.colorId).text(value.colorName));
						 });				
					}else if(data.errorCode=="100"){
						navigator.notification.alert("Please Sign In");
						window.location='index_login.html';
						return false;
					}	
				}
			});
		//create grade options 
		//navigator.notification.alert(window.localStorage["url"]+'/gradesbyclimbsystem/'+window.localStorage["climbSystemId"]+'/?token='+token1);
			$.ajax({
			type: "GET",
			url: window.localStorage["url"]+'/gradesbyclimbsystem/'+window.localStorage["climbSystemId"]+'/?token='+token1,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(data){
					if(data.status == "SUCCESS"){
						$('#select-grade').append($("<option></option>").attr("value","").text("Grade"));
						$.each(data.data, function(key,value){	
						$('#select-grade').append($("<option></option>").attr("value",value.gradeId).text(value.gradeName));
						 });				
					}else if(data.errorCode=="100"){
						navigator.notification.alert("Please Sign In");
						window.location='index_login.html';
						return false;
					}
				}
			});	
			//create setter options		
			$.ajax({
			type: "GET",
			url: window.localStorage["url"]+'/getsettersforlocationgrp/'+window.localStorage["GroupId"]+'?token='+token1,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function(data){ 
			//navigator.notification.alert("GroupId: "+window.localStorage["GroupId"]);
					if(data.status == "SUCCESS"){
						$('#select-setter').append($("<option></option>").attr("value","").text("Setter"));
							$.each(data.data, function(key,value){
								$('#select-setter').append($("<option></option>").attr("value",value.userid).text(value.firstName+" "+value.lastName));
							});
					}else if(data.errorCode=="100"){
						navigator.notification.alert("Please Sign In");
						window.location='index_login.html';
						return false;
					}				
				}
			});		
		}
	}
</script>
